<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 100px;
        }

        div {
            margin-bottom: 20px;
        }

        span {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px solid #000;
        }

        div span:first-child:nth-last-child(3),
        div span:first-child:nth-last-child(3) ~ span {
            color: orange;
        }

        div span:nth-child(-n+2) {
            background: gray;
        }

        div span:nth-child(n+5) {
            background: skyblue;
        }

        div span:nth-child(-n+4):nth-child(n+3) {
            border: none;
        }

        div span:first-child:nth-last-child(-n+4),
        div span:first-child:nth-last-child(-n+4) ~ span {
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }

        div span:first-child:nth-last-child(n+4),
        div span:first-child:nth-last-child(n+4) ~ span {
            text-align: right;
        }
    </style>
</head>
<body>
<p>
    恰好3个子元素的字体呈现橙色
    <br>第2个元素以及之前的元素背景呈现灰色
    <br>第5个及之后的背景呈现天蓝色
    <br>第3~4个元素的无边框
    <br>项数不多于4个的元素内容局中
    <br>像素不少于4的元素内容右对齐
</p>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span>d</span>
    <span>e</span>
    <span>f</span>
</div>
</body>
</html>
